<template>
  <div>
    <!-- 搜索 -->
    <HeadSeach ref="headSeach" />
    <div class="app-content">
      <Content>
        <el-table :data="list.data" style="width: 100%" size="small" height="100%">
          <el-table-column label="操作者ID" min-width="15" prop="uid" />
          <el-table-column label="操作者用户名" min-width="20" prop="username" />
          <el-table-column label="接口地址" min-width="30" prop="api_url" />
          <el-table-column label="接口名称" min-width="30" prop="api_name" />
          <el-table-column label="ip地址" min-width="25" prop="ip" />
          <el-table-column label="请求参数" min-width="100" prop="request_param" />
          <el-table-column label="操作时间" min-width="25" prop="update_time" />
        </el-table>
        <pagination ref="pagination" />
      </Content>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { Log } from '@/api/system/log'
import HeadSeach from '@/components/HeadSeach'
export default {
  name: 'Log',
  components: {
    Pagination,
    HeadSeach
  },
  data() {
    return {
      seach: {},
      list: {
        data: []
      },
      pagination: {
        page: 1,
        per_page: 30
      }

    }
  },
  created() {
    this.getLog()
  },
  mounted() {
    this.assembleSeachData()
  },
  methods: {
    getLog() {
      Log.pageOperationLog({ ...this.pagination, ...this.seach }).then((res) => {
        this.list = res.data
        this.initPagination({
          page: res.data.current_page,
          total: res.data.total,
          per_page: res.data.per_page
        })
      }).catch(() => {})
    },
    // 分页
    initPagination(data) {
      this.$refs.pagination.init({ ...data, cb: (res) => {
        this.pagination = res
        this.getLog()
      } })
    },
    // 组装搜索数据
    assembleSeachData() {
      const searchData = {
        label: '操作日志搜索',
        size: 'small',
        model: {
          username: '',
          api_url: '',
          api_name: '',
          start_time: '',
          end_time: '',
          ym: ''
        },
        options: [{
          tag: 'Input', // Input --输入框 select--选择框 DatePicker --时间选择
          prop: 'username', // 绑定对应标签的变量名
          placeholder: '用户名'
        },
        {
          tag: 'Input', // Input --输入框 select--选择框 DatePicker --时间选择
          prop: 'api_url', // 绑定对应标签的变量名
          placeholder: '接口地址'
        },
        {
          tag: 'Input', // Input --输入框 select--选择框 DatePicker --时间选择
          prop: 'api_name', // 绑定对应标签的变量名
          placeholder: '接口名称'
        },
        {
          tag: 'DatePicker', // Input --输入框 select--选择框 DatePicker --时间选择
          prop: 'start_time', // 绑定对应标签的变量名
          type: 'date',
          placeholder: '开始时间'
        },
        {
          tag: 'DatePicker', // Input --输入框 select--选择框 DatePicker --时间选择
          prop: 'end_time', // 绑定对应标签的变量名
          type: 'date',
          placeholder: '结束时间'
        },
        {
          tag: 'DatePicker', // Input --输入框 select--选择框 DatePicker --时间选择
          prop: 'ym', // 绑定对应标签的变量名
          type: 'month',
          format: 'yyyyMM',
          placeholder: '月份'
        }],
        cb: (data) => {
          this.seach = data
          this.pagination.page = 1
          this.getLog()
        }
      }
      this.$refs.headSeach.init(searchData)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-content{
  background: white;
}
</style>
